<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/src/assets/image/logo.png"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
    <link rel="stylesheet" href="/src/assets/css/font.css">
</head>

<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>

<script>
    const container = document.querySelector("#app")
    const loadingMask = document.createElement("div")
    loadingMask.id = 'loading-mask'
    loadingMask.innerHTML = `<div class="loader-44"/>`
    container.appendChild(loadingMask)
</script>

<style>
    body {
        margin: 0;
        position: relative;
    }

    @keyframes boxShadowOffset3 {
        0% {
            box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
        }
        25% {
            box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
        }
        50% {
            box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
        }
        75% {
            box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
        }
        100% {
            box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
        }
    }

    .loader-44 {
        position: relative;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        color: #90cf5b;
        -webkit-animation: boxShadowOffset3 2s linear infinite;
        animation: boxShadowOffset3 2s linear infinite;
    }

    #loading-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: blanchedalmond;
        z-index: 9999999999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>

</html>